import {
    AxesHelper,
    BoxGeometry,
    CircleGeometry,
    CylinderGeometry,
    Mesh,
    MeshBasicMaterial,
    PerspectiveCamera,
    PlaneGeometry,
    Scene,
    SphereGeometry,
    WebGLRenderer,
    DoubleSide,
    FrontSide,
    MeshPhongMaterial,
    PointLight,
    PointLightHelper,
    AmbientLight,
} from "three";
import { renderColorMap, colorMapSet } from "./colorMap";
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
//引入性能监视器stats.js
import Stats from "three/addons/libs/stats.module.js";
// 引入dat.gui.js的一个类GUI
import { GUI } from "three/addons/libs/lil-gui.module.min.js";
const _stats = new Stats();
document.body.appendChild(_stats.domElement);
const CanvasWidth = window.innerWidth;
const CanvasHeight = window.innerHeight;
const addArray = [];

// 创建场景
const scene = new Scene();
// 准备模型
const geometry = new BoxGeometry(100, 100, 100); //正方体
// const geometry = new SphereGeometry(50);//球体
// const geometry = new CylinderGeometry(0, 10, 100); // 圆柱
// const geometry = new PlaneGeometry(100, 50); // 矩形平面 就是一个平面
// const geometry = new CircleGeometry(50); // 圆平面
for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
        // 创建不反射材质
        const material = new MeshPhongMaterial({
            color: renderColorMap(),
            transparent: true, //开启透明
            opacity: 0.5, //设置透明度
            side: DoubleSide, //两面可见
            // side: THREE.FrontSide, //正面可见(预设)
            shininess: 40, // 高光区域反射 默认30
            specular: 0x87ceeb, //反射颜色
        });
        const mesh = new Mesh(geometry, material);
        mesh.position.set(i * 200, 0, j * 200);
        addArray.push(mesh);
        scene.add(mesh);
    }
}

// 创建相机
const camera = new PerspectiveCamera(30, CanvasWidth / CanvasHeight, 1, 8000);
camera.position.set(800, 800, 800);
camera.lookAt(900, 0, 900);
const axesHelper = new AxesHelper(150);
scene.add(axesHelper);

// 添加点光源
const pointLight = new PointLight(0xffffff, 1.0);
pointLight.position.set(900, 1000, 1200);
// 光源辅助观察
const pointLightHelper = new PointLightHelper(pointLight, 10);
scene.add(pointLight);
scene.add(pointLightHelper);
// 添加环境光
const ambient = new AmbientLight(0xffffff, 0.4);
scene.add(ambient);

// 渲染
const renderer = new WebGLRenderer({
    antialias: true, //渲染器锯齿
});

console.log("查看当前浏览器像素比", window.devicePixelRatio);
renderer.setPixelRatio(window.devicePixelRatio); // 设置像素比，根据浏览器像素比来定 如果遇到不同的像素比可以防止渲染锯齿
// 设置渲染空间背景颜色
renderer.setClearColor(0x87ceeb, 1);
renderer.setSize(CanvasWidth, CanvasHeight);
const contorols = new OrbitControls(camera, renderer.domElement);
contorols.addEventListener("change", () => {
    renderer.render(scene, camera);
});
contorols.target.set(900, 0, 900);
contorols.update();
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);
// 创建gui对象
const gui = new GUI();
gui.domElement.style.right = "0px";
gui.domElement.style.width = "300px";
// 创建滚动条
const obj = {
    x: 30,
};
gui.add(obj, "x", 0, 100).name("光照强度");
console.log("光照强度", ambient.intensity);
gui.add(ambient, "intensity", 0, 2.0)
    .name("平行光强度")
    .onChange(value => {
        console.log("平行光强度改变了", value);
    });
gui.add(addArray[0].position, "x", 0, 180).name("第1个盒子X");
gui.add(addArray[0].position, "y", 0, 180).name("第1个盒子Y");
gui.add(addArray[0].position, "z", 0, 180).name("第1个盒子Z");
// 生成颜色改变的交互界面
gui.addColor(colorMapSet, "color").onChange(value => {
    console.log("颜色改变了", value);
    addArray[0].material.color.set(value);
    renderer.render(scene, camera);
});
